<template>
    <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
        <div class="container">
            <a class="navbar-brand" href="#">E-BLOG</a>
            <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <router-link class="nav-link" aria-current="page" to="/list/study" active-class="active"
                            >学习笔记</router-link
                        >
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" to="/list/project" active-class="active">项目笔记</router-link>
                    </li>
                    <li class="nav-item" v-show="$store.state.isLogin">
                        <router-link class="nav-link" to="/management" active-class="active"
                            >笔记管理</router-link
                        >
                    </li>
                </ul>
                <!-- <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="文章标题" aria-label="Search" />
                    <button class="btn btn-outline-success" type="submit">搜索</button>
                </form> -->
                <ul class="nav justify-content-end">
                    <li class="nav-item" v-show="!$store.state.isLogin">
                        <router-link class="nav-link active" aria-current="page" to="/login">登录</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script>
export default {};
</script>

<style scoped>
.navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    height: 60px;
}
</style>
